<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{:lang('代理头部标题')}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__CSS__/mui.min.css">
    <link rel="stylesheet" href="__FONTS__/iconfont.css">
    <link rel="stylesheet" href="__CSS__/layerout.css">
</head>
<body>
    {include file="public/foot" /}
    <!--<header class="mui-bar mui-bar-nav">-->
        <!--<h1 class="mui-title">代理</h1>-->
    <!--</header>-->
    <div class="mui-content">
        <div class="mainTop">
            <div><span style="font-size: 14px;">{:lang('余额')}&nbsp;</span>:<em>{$yue}</em>$</div>
            <p style="color: #fff;"><span style="font-size: 14px;color: #fff;">Metfone&nbsp;:</span>&nbsp;<em style="color: #fff;">{$zhekou[1]*100}</em>{:lang('zhekou')}</p>
            <p style="color: #fff;"><span style="font-size: 14px;color: #fff;">Cellcard&nbsp;:</span>&nbsp;<em style="color: #fff;">{$zhekou[2]*100}</em>{:lang('zhekou')}</p>
            <p style="color: #fff;"><span style="font-size: 14px;color: #fff;">Smart&nbsp;:</span>&nbsp;<em style="color: #fff;">{$zhekou[3]*100}</em>{:lang('zhekou')}</p>
        </div>
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mui-active" href="#item1mobile">{:lang('充话费')}</a>
            <a class="mui-control-item" href="#item2mobile">{:lang('充值')}</a>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-input-group myGroup" style="margin-bottom: 10px;">
                    <div class="mui-input-row myRadio">
                        <label for="la1"><input id="la1" type="radio" name="yuyingshang" value="1" checked />&nbsp;Metfone</label>
                        <label for="la2"><input id="la2" type="radio" name="yuyingshang"  value="2" />&nbsp;Cellcard</label>
                        <label for="la3"><input id="la3" type="radio" name="yuyingshang"  value="3" />&nbsp;Smart</label>
                    </div>
                    <div class="mui-input-row">
                        <label>{:lang('手机号')}</label>
                        <input id="phone" type="text" class="mui-input-clear" placeholder="{:lang('请输入手机号')}">
                    </div>
                    <div class="mui-input-row">
                        <label>{:lang('金额')}</label>
                        <input id="phone_money" type="text" class="mui-input-clear" placeholder="{:lang('请输入充值金额')}">
                    </div>
                </div>
                <div style="width: 93%; text-align: center; margin:20px auto 0 ">
                    <button id="money_chongzhi" class="mui-btn mui-btn-block mui-btn-blue">{:lang('确认充值')}</button>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-input-group myGroup" style="margin-bottom: 10px;">
                    <div class="mui-input-row">
                        <label>{:lang('金额')}</label>
                        <input id="chongzhimomey" type="text" class="mui-input-clear" placeholder="{:lang('请输入充值金额')}">
                    </div>
                </div>
                <div style="width: 93%; text-align: center; margin:20px auto 0 ">
                    <button id="chongzhi" class="mui-btn mui-btn-block mui-btn-blue">{:lang('确认充值')}</button>
                </div>

            </div>

        </div>
    </div>
   
    <script src="__JS__/jquery-3.1.1.min.js"></script>
    <script>
       // mui("body").on('tap','a',function(){
      //      location.href=this.getAttribute('href');
      //  });
$(function(){

  $(".mui-control-content").eq(0).show();
        $(".mui-segmented-control a").click(function(){
            var $this = $(this);
            var num =$(".mui-segmented-control a").index(this);
            $this.addClass('mui-active');
            $this.siblings().removeClass('mui-active');
            $(".mui-control-content").hide();
            $(".mui-control-content").eq(num).show().addClass('mui-active').siblings().hide().removeClass('mui-active');
        })
});
        function onBridgeReady(ret){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":ret.appId,     //公众号名称，由商户传入
                    "timeStamp":ret.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr":ret.nonceStr, //随机串
                    "package":ret.package,
                    "signType":ret.signType,         //微信签名方式：
                    "paySign":ret.paySign //微信签名
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        alert("{:lang('支付成功')}");
                        $('#chongzhimomey').val("{:lang('缺少参数')}");


                    }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                }
            );
        }
        $(function () {
            $('#chongzhi').click(function () {
                var $money=$('#chongzhimomey').val();
                if($money == ''){
                    alert("{:lang('请输入充值金额')}");
                }else{
                    $.getJSON('{:URL("wap/index/recharge")}',{money:($money)},function (data) {
                        if(data.code){
                            onBridgeReady(data.data);
                        }else{
                            alert("{:lang('缺少参数')}");

                        }
                    })
                }
            });
            $('#money_chongzhi').click(function () {
                var  $phone=$('#phone').val();
                var  $money=$('#phone_money').val();
                var  $cate_id=$("input[name='yuyingshang']:checked").val();
                if($phone == ''){
                    alert("{:lang('请填写手机号')}");
                    return false;
                }
                if(!(/^\d{3,15}$/.test($phone))){
                    alert("{:lang('手机号码有误')}");
                    return false;
                }
                if($money == ''){
                    alert("{:lang('请输入充值金额')}");
                    return false;
                }


                $.getJSON('{:URL("wap/index/balance")}',{money:($money),cate_id:$cate_id,phone:$phone},function (data) {
                    if(data.code == 1){
                        $('#phone').val("");
                        $('#phone_money').val("");
                        alert("{:lang('支付成功')}");
                    }else{
                        switch (data.code){
                            case -1:
                                alert("{:lang('缺少参数')}");
                                break;
                            case -2:
                                alert("{:lang('余额不足')}");
                                break;
                            case -3:
                                alert("{:lang('扣款失败')}");
                                break;
                            case -4:
                                alert("{:lang('订单记录失败')}");
                                break;
                            case -5:
                                alert("{:lang('创建记录失败')}");
                                break;
                        }

                    }
                });

              /*  var btn = ["{:lang('确认')}", "{:lang('取消')}"];
                mui.confirm( "{:lang('请确认您的手机号和金额')}","{:lang('充值确认')}", btn, function(e) {
                    if(e.index == 0 ){

                    }else{
                        alert("{:lang('充值取消')}");
                    }

                })
*/

            });
        });

    </script>
</body>
</html>